import React from 'react';

const R = require('ramda');
import {connect} from 'dva';
import {Form, Button, Modal, Tabs, message} from 'antd';
import AccountInfos from './AccountInfos';
import CostList from './CostList';
import Submit from './Submit';
import Constants from '../../utils/Constants';
const TabPane = Tabs.TabPane;


export default connect(({customerManage, orderManage, settlement, customs, logisticsSupplier, forexPurchase}) => ({customerManage, orderManage, settlement, customs, logisticsSupplier, forexPurchase}))(Form.create({wrappedComponentRef: true})(class CustomerDetail extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                open: false,
                disabled: false,
                transferamount: '',
                tabActiveKey: "1",
                statementFee: [],
                cstId: '',
                accno: '',
                accopenbank: '',
                customerno: '',
                companyname: ''
            };
        }


        handleOpen = (cstId, customerno, companyname) => {
            this.setState({ open: true, cstId, customerno, companyname });
        }


        handleCancel = (flag) => {
            if (this.accountInfos) this.accountInfos.handleResetFields();
            if (this.costList) this.costList.handleResetFields();
            if (this.submit) this.submit.handleResetFields();
            if(this.props.handleSearch) this.props.handleSearch();
            this.setState({ tabActiveKey: "1", open: false });
        }


        handleChangeTabe = (key) => {
            this.setState({tabActiveKey: key})
        }

        setAccno = (accno, accopenbank) => {
            this.setState({ accno, accopenbank });
        }


        handleBack = () => {
            if(this.state.tabActiveKey === "3"){
                if (this.submit) this.submit.handleResetFields();
            }
            this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) - 1) + ""});
        }


        handleNext = () => {
            if (this.state.tabActiveKey === "1" && this.accountInfos.handleConfirm()) {
                this.props.dispatch({ type: 'forexPurchase/getCstAmtById', payload: { id: this.state.cstId }});

                this.props.dispatch({
                    type: 'settlement/queryStatetemntDetail',
                    payload: {
                        id: this.state.cstId,
                        stObjId: 999999999
                    }
                });

                this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) + 1) + ""});
            }

            if (this.state.tabActiveKey === "2") {
                let statementFee = this.costList.returnFeeList();
                if (R.isNil(statementFee) || R.isEmpty(statementFee)) {
                    message.info("请选择费用结算");
                    return;
                }

                let account = null;
                if (statementFee) {
                    for (let i = 0; i < statementFee.length; i++) {
                        account += statementFee[i].costAmt;
                    }
                }

                let cstAmt =  this.props.forexPurchase.cstAmtList ? this.props.forexPurchase.cstAmtList : {};
                if(account > cstAmt.balance) {
                    message.error("结算总金额超出客户资金可用余额!");
                    return;
                }
                this.setState({ transferamount: account, statementFee: statementFee, tabActiveKey: (parseInt(this.state.tabActiveKey) + 1) + "" });
            }

        }


        addStatement = () => {
            if (this.submit.handleConfirm()) {
                this.handleCancel();
            }
        }


        render() {

            let footer = [];

            footer.push(<Button key="back" size="large" disabled={this.state.disabled} onClick={this.handleBack.bind(this)}
                                style={{display: this.state.tabActiveKey === "1" ? "none" : "inline-block"}}>上一步</Button>);

            if (this.state.tabActiveKey === "2") {
                footer.push(<Button key="next" size="large"
                                    onClick={this.handleNext.bind(this)}
                                    style={{display: this.state.tabActiveKey === "3" ? "none" : "inline-block"}}>下一步</Button>);
            } else {
                footer.push(<Button key="next" size="large" disabled={this.state.disabled}
                                    onClick={this.handleNext.bind(this)}
                                    style={{display: this.state.tabActiveKey === "3" ? "none" : "inline-block"}}>下一步</Button>);

            }

            if (this.state.tabActiveKey === "3") {
                footer.push(<Button key="submit" size="large" disabled={this.state.disabled}
                                    onClick={this.addStatement.bind(this)} style={{display: "inline-block"}}>提交申请</Button>);
            }

            footer.push(<Button key="cancel" size="large" disabled={this.state.disabled}
                                onClick={this.handleCancel.bind(this, true)}>取消</Button>);


            let widths = {
                "1": 900,
                "2": 1000,
                "3": 1000,
                "4": 900,
                "5": 900
            };


            return (
                <Modal maskClosable={false} footer={footer} visible={this.state.open}
                       title={"新增结算单"} width={widths[this.state.tabActiveKey]} wrapClassName="vertical-center-modal"
                       onCancel={this.handleCancel}>
                    <Tabs activeKey={this.state.tabActiveKey} tabPosition={'left'}
                          onChange={this.handleChangeTabe.bind(this)}>
                        <TabPane tab="账户信息" key="1" disabled={!this.state.disabled}>{<AccountInfos wrappedComponentRef={(inst) => this.accountInfos = inst}
                             dispatch={this.props.dispatch}
                             setAccno={this.setAccno}
                            />}
                        </TabPane>

                        <TabPane tab="结算费用" key="2" disabled={!this.state.disabled}>{<CostList wrappedComponentRef={(inst) => this.costList = inst}
                            dataSource={this.props.settlement}
                            cstId={this.state.cstId}
                            dispatch={this.props.dispatch}
                            forexPurchase={this.props.forexPurchase}
                            customerno={this.state.customerno}
                            companyname={this.state.companyname}
                            />}
                        </TabPane>

                        <TabPane tab="转账信息" key="3" disabled={!this.state.disabled}>{<Submit wrappedComponentRef={(inst) => this.submit = inst}
                            cstId={this.state.cstId}
                            statementFee={this.state.statementFee}
                            transferamount={this.state.transferamount}
                            handleSearch={this.props.handleSearch}
                            dispatch={this.props.dispatch}
                            accno={this.state.accno}
                            accopenbank={this.state.accopenbank}
                        />}
                        </TabPane>
                    </Tabs>
                </Modal>
            );
        }
    })
)


